<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="修改开票信息"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <view class="content">
      <!-- 表单区域 -->
      <view class="form-section">
        <!-- 抬头类型 -->
        <view class="form-item">
          <text class="form-label">抬头类型</text>
          <text class="form-value">{{ formData.titleType }}</text>
        </view>

        <!-- 发票类型 -->
        <view class="form-item clickable" @click="openInvoiceTypePicker">
          <text class="form-label">发票类型</text>
          <view class="form-selector">
            <text
              :class="['selector-text', { placeholder: !formData.invoiceType }]"
            >
              {{ formData.invoiceType || "请选择" }}
            </text>
            <uni-icons type="forward" size="16" color="#999" />
          </view>
        </view>

        <!-- 提示信息 -->
        <view class="tip-text">抬头类型与发票类型说明</view>

        <!-- 发票抬头 -->
        <view class="form-item">
          <text class="form-label">发票抬头</text>
          <text class="form-value">{{ formData.title }}</text>
        </view>

        <!-- 纳税人识别号 -->
        <view class="form-item no-border">
          <text class="form-label">纳税人识别号</text>
          <text class="form-value">{{ formData.taxNumber }}</text>
        </view>
      </view>

      <!-- 选填项 -->
      <view class="form-section">
        <view class="section-title">选填项</view>

        <!-- 开户银行 -->
        <view class="form-item">
          <text class="form-label">开户银行</text>
          <input
            v-model="formData.bank"
            class="form-input"
            type="text"
            placeholder="请输入开户许可证上的开户银行"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 开户账号 -->
        <view class="form-item">
          <text class="form-label">开户账号</text>
          <input
            v-model="formData.bankAccount"
            class="form-input"
            type="text"
            placeholder="请输入开户许可证上的开户账号"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 注册地址 -->
        <view class="form-item">
          <text class="form-label">注册地址</text>
          <input
            v-model="formData.address"
            class="form-input"
            type="text"
            placeholder="请输入注册地址"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 注册电话 -->
        <view class="form-item">
          <text class="form-label">注册电话</text>
          <input
            v-model="formData.phone"
            class="form-input"
            type="text"
            placeholder="请输入有效的联系电话"
            placeholder-style="color: #ccc"
          />
        </view>

        <!-- 发票备注 -->
        <view class="form-item textarea-item no-border">
          <text class="form-label">发票备注</text>
          <textarea
            v-model="formData.remark"
            class="form-textarea"
            placeholder="打印在发票备注的内容区"
            placeholder-style="color: #ccc"
            auto-height
            :maxlength="200"
          />
        </view>
      </view>
    </view>

    <!-- 底部确认按钮 -->
    <view class="footer-action">
      <view class="confirm-btn" @click="handleConfirm">
        <text>确认</text>
      </view>
    </view>

    <!-- 发票类型选择器 -->
    <uni-popup ref="invoiceTypePickerRef" type="bottom">
      <view class="picker-modal">
        <view class="picker-header">
          <text class="picker-title">选择发票类型</text>
          <uni-icons
            type="close"
            size="24"
            color="#666"
            @click="closeInvoiceTypePicker"
          />
        </view>

        <view class="picker-content">
          <view
            v-for="(type, index) in invoiceTypes"
            :key="index"
            :class="[
              'picker-option',
              { active: formData.invoiceType === type },
            ]"
            @click="selectInvoiceType(type)"
          >
            <text>{{ type }}</text>
            <uni-icons
              v-if="formData.invoiceType === type"
              type="checkmarkempty"
              size="20"
              color="#ff9500"
            />
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";

// 表单数据
const formData = ref({
  titleType: "企业",
  invoiceType: "",
  title: "",
  taxNumber: "",
  bank: "",
  bankAccount: "",
  address: "",
  phone: "",
  remark: "",
});

// 发票类型选项
const invoiceTypes = ref(["普通发票", "增值税专用发票"]);

// 发票类型选择器
const invoiceTypePickerRef = ref(null);

// 接收路由参数
onLoad((options) => {
  loadInvoiceInfo();
});

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 加载发票信息
const loadInvoiceInfo = async () => {
  try {
    // TODO: 调用真实API
    // 模拟数据
    formData.value = {
      titleType: "企业",
      invoiceType: "普通发票",
      title: "杭州临安嘉智行源信息咨询工作室（个体工商户）",
      taxNumber: "92330185MAD4WNGK74",
      bank: "",
      bankAccount: "",
      address: "",
      phone: "",
      remark: "",
    };
  } catch (error) {
    console.error("加载发票信息失败:", error);
    uni.showToast({
      title: "加载失败",
      icon: "none",
    });
  }
};

// 打开发票类型选择器
const openInvoiceTypePicker = () => {
  invoiceTypePickerRef.value?.open();
};

// 关闭发票类型选择器
const closeInvoiceTypePicker = () => {
  invoiceTypePickerRef.value?.close();
};

// 选择发票类型
const selectInvoiceType = (type) => {
  formData.value.invoiceType = type;
  closeInvoiceTypePicker();
};

// 确认提交
const handleConfirm = () => {
  // 验证必填项
  if (!formData.value.invoiceType) {
    uni.showToast({
      title: "请选择发票类型",
      icon: "none",
    });
    return;
  }

  // 验证电话格式（如果填写了）
  if (formData.value.phone && !/^1[3-9]\d{9}$/.test(formData.value.phone)) {
    uni.showToast({
      title: "请输入有效的联系电话",
      icon: "none",
    });
    return;
  }

  // TODO: 调用API保存数据
  uni.showToast({
    title: "保存成功",
    icon: "none",
  });

  // 延迟返回
  setTimeout(() => {
    uni.navigateBack();
  }, 1500);
};

onMounted(() => {
  // 组件挂载后的操作
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding-bottom: 160rpx;
}

// 表单区域
.form-section {
  background-color: #fff;
  margin-bottom: 20rpx;
  padding: 0 32rpx;
}

.section-title {
  font-size: 28rpx;
  color: #999;
  padding: 32rpx 0 16rpx;
}

// 表单项
.form-item {
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1rpx solid #f0f0f0;

  &.no-border {
    border-bottom: none;
  }

  &.clickable {
    &:active {
      opacity: 0.7;
    }
  }

  &.textarea-item {
    align-items: flex-start;
  }
}

.form-label {
  font-size: 28rpx;
  color: #333;
  min-width: 200rpx;
  flex-shrink: 0;
}

.form-value {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;
  word-break: break-all;
}

.form-input {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  text-align: right;

  &::placeholder {
    color: #ccc;
  }
}

.form-textarea {
  flex: 1;
  font-size: 28rpx;
  color: #333;
  min-height: 120rpx;
  line-height: 1.6;

  &::placeholder {
    color: #ccc;
  }
}

.form-selector {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8rpx;
}

.selector-text {
  font-size: 28rpx;
  color: #333;

  &.placeholder {
    color: #ccc;
  }
}

// 提示文字
.tip-text {
  font-size: 24rpx;
  color: #ff4d4f;
  padding: 16rpx 0 24rpx;
}

// 底部操作按钮
.footer-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 32rpx;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
  background-color: #fff;
  border-top: 1rpx solid #f0f0f0;
}

.confirm-btn {
  height: 88rpx;
  background: linear-gradient(135deg, #ffd000 0%, #ff9500 100%);
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #fff;
  font-weight: 600;

  &:active {
    opacity: 0.9;
  }
}

// 发票类型选择器
.picker-modal {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.picker-title {
  flex: 1;
  text-align: center;
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

.picker-content {
  padding: 16rpx 32rpx 32rpx;
}

.picker-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 0;
  font-size: 28rpx;
  color: #333;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: none;
  }

  &.active {
    color: #ff9500;
    font-weight: 500;
  }

  &:active {
    background-color: #f5f5f5;
  }
}
</style>
